<template>
  <el-container style="height: 900px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: #071950">
      <el-menu router background-color="#071950"
               text-color="#fff"
               active-text-color="#ffd04b">

        <el-menu-item>
          <template #title><i class="el-icon-house"></i>欢迎，{{userName}}</template>
        </el-menu-item>
        <!--首页        -->
        <el-menu-item v-for="item in $router.options.routes.slice(5,6)" :index="item.children[0].path">
          <template #title><i class="el-icon-user"></i>个人首页</template>
        </el-menu-item>
        <!--记录        -->
        <el-menu-item v-for="item in $router.options.routes.slice(5,6)" :index="item.children[1].path">
          <template #title><i class="el-icon-document"></i>咨询记录</template>
        </el-menu-item>
<!--        <el-menu-item v-for="item in $router.options.routes.slice(5,6)" :index="item.children[2].path">-->
<!--          <template #title><i class="el-icon-document"></i>咨询服务</template>-->
<!--        </el-menu-item>-->
        <el-menu-item @click="loginOut" index="">
          <template #title ><i class="el-icon-close"></i>退出登录</template>
        </el-menu-item>
        <el-row style="height: 50px"></el-row>
        <el-menu-item v-for="(item,index) in handleConversationList(conversationList)" @click="indexToChat(item.conversationID)">
          <el-avatar :src="avatar" :size="30"></el-avatar> &nbsp; &nbsp;
          <template #title>{{item.conversationID.slice(3,item.conversationID.length)}} &nbsp;
            <el-badge type="danger" :value="item.unreadCount" :max="99" class="my_badge" v-if="item.unreadCount!==0"></el-badge>
          </template>
        </el-menu-item>
        <el-row style="height: 250px"></el-row>
        <el-menu-item @click="drawerExtend()">
          <template #title><i class="el-icon-chat-line-square"></i>会话列表</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-drawer
        title="会话列表"
        v-model="drawerVisible"
        :direction="direction"
        :size="'15%'"
    >
      <el-menu :height="800">
        <el-menu-item v-for="(item,index) in conversationList.reverse()" @click="indexToChat(item.conversationID)">
          <el-avatar :src="avatar" :size="30"></el-avatar> &nbsp; &nbsp;
          <template #title>{{item.conversationID.slice(3,item.conversationID.length)}} &nbsp;
            <el-badge type="danger" :value="item.unreadCount" :max="99" class="my_badge" v-if="item.unreadCount!==0"></el-badge>
          </template>
        </el-menu-item>
      </el-menu>
    </el-drawer>
    <el-container>
      <el-header class="el-header" style="text-align: left; font-size: 12px; ">
        <el-space :size="size" :spacer="spacer">
          <el-card shadow="never" style="height: 70px; width:70px ;border: 0; display: flex">
            <el-avatar style="height: 50px ; width: 50px;display:flex  " :src="url" ></el-avatar>
          </el-card>
          <el-card class="cardme" shadow="never" style="height: 70px; width:300px">
            心理咨询服务平台
          </el-card>

        </el-space>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { h, resolveComponent } from 'vue'
import { ElDivider } from 'element-plus'
import tim from '../tim'
import TIM from "_tim-js-sdk@2.17.1@tim-js-sdk/tim-js-friendship";
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
export default {
  name: "Demo",
  data() {
    return{
      userName:'',
      drawerVisible:false,
      direction:'ltr',
      conversationList:[],
      avatar:circleUrl,
      doctor:{},
      size: 10,
      spacer: h(ElDivider, { direction: 'vertical' }),
      fit:'fill',
      url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F05%2F95%2F5b2ced36b07a5_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648889501&t=6f6320df2ee5bfe4fecbe973c1721126"
    }
  },
  methods:{
    drawerExtend(){
      const _this = this
      _this.drawerVisible = true
    },
    handleConversationList(list){
      let cnt = 0;
      let res = []
      for (let item of list){
        if (cnt>5){break}
        if (item.unreadCount !== 0){
          res.push(item)
        }
      }
      return res
    },
    async indexToChat(chatName){
      await tim.setMessageRead({conversationID:chatName}).then(_=>{
        console.log("reset")
      }).catch((imError)=>{
        console.log(imError)
      })
      this.$router.push({
        path:'/mentor/chat',
        query:{
          chatName:chatName.slice(3,chatName.length)
        }
      }).then((_)=>{
        this.$router.go(0)
      })

    },
    loginOut(){
      const _this = this
      _this.$axios.post('http://106.14.247.163:8080/account/logout/'+window.sessionStorage.getItem('userid'))
      window.sessionStorage.clear()
      _this.$router.push('/login')
      tim.logout()
    }

  },created() {
    const _this = this
    const userId = window.sessionStorage.getItem('userid')
    const userSig = window.sessionStorage.getItem('usersig')
    _this.userName = window.sessionStorage.getItem('name')
    tim.login({userID:userId,userSig:userSig})
    tim.on(TIM.EVENT.SDK_READY, function(event) {
      let promise1 = tim.getConversationList();
      promise1.then(function (imResponse){
        _this.conversationList = imResponse.data.conversationList.reverse();
        console.log(_this.conversationList[0])
      }).catch(function (imError){
        console.warn(imError)
      })

    });
    let onMessageReceived = function(event) {
      let promise = tim.getConversationList();
      promise.then(function (imResponse){
        _this.conversationList = imResponse.data.conversationList.reverse();
        console.log(_this.conversationList[0].conversationID)
      }).catch(function (imError){
        console.warn(imError)
      })
      console.log(event.data[0].payload.text)

      // event.data - 存储 Message 对象的数组 - [Message]
    };
    tim.on(TIM.EVENT.MESSAGE_RECEIVED,onMessageReceived)
  },mounted() {
    const _this = this
    console.log('mount')
    let promise1 = tim.getConversationList();
    promise1.then(function (imResponse){
      _this.conversationList = imResponse.data.conversationList.reverse();
      console.log(_this.conversationList[0])
    }).catch(function (imError){
      console.warn(imError)
    })
  },destroyed() {
    this.$axios.post('http://106.14.247.163:8080/account/logout/'+window.sessionStorage.getItem('userid'))
    tim.logout()
  }
}
</script>

<style scoped>
.title{
  font-size: 20px;
  font-weight: normal;
}
.cardme {
  border: 0;
  display: flex;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.my_badge /deep/ .el-badge__content{
  border:none
}
</style>